<script lang="ts" setup>
import type { SegmentItem } from '@/types/interface'
import type { PropType } from 'vue'

const props = defineProps({
    selectItems: {
        type: Array as PropType<SegmentItem[]>,
        defult: {}
    }
})

const emit = defineEmits(['selectedDone'])

const selectAction = (selectItem : SegmentItem)=>{
    let selectedItem = props.selectItems?.find((item)=>{
        return item.isSelect
    })
    selectedItem!.isSelect = false
    selectItem.isSelect = true
    emit('selectedDone',selectItem.type)
}
</script>

<template>
    <div>
       <span v-for="(item,index) in selectItems" :key="index" class="cursor-pointer" @click="selectAction(item)">
            <span :class="[item.isSelect ? 'selected-item' : 'normal-item']" class="m-r-5 font-size-10">{{ item?.title }}</span>
       </span>
    </div>
</template>   

<style lang="stylus" scoped>
@import "stylus-px2rem";
@import url('@/css/normal.styl');

.selected-item
    color white
    background-color rgb(46,64,146)
    border solid .8px rgb(59,90,191)
    border-radius 2px
    padding 1px 3px
    font-size 9px

.normal-item
    color rgb(133,164,206)
    background-color rgb(32,64,128)
    border solid .8px rgb(32,64,128)
    border-radius 2px
    padding 1px 3px
    font-size 9px
</style>